{{ define "vars_" }}

<h2>{{ .N }} Vars <button onclick="revealAllVars()" title="Reveal secrets">🫢</button>&nbsp;<button onclick="hideAllVars()" title="Hide secrets">🫣</button></h2>

<button onclick="deleteVars()">Delete</button>
<button onclick="setVar()">Set:</button>
<input type="text" id="var-name" placeholder="name" />
<input type="checkbox" id="var-secret" />🤐&nbsp;
<input type="text" id="var-value" placeholder="value" />
<input type="checkbox" id="var-optional" />optional&nbsp;

{{ template "list_table_" . }}

<script>
    function revealAllVars() {
        const params = new URLSearchParams(window.location.search);
        params.set('reveal', 'true');
        window.location.search = params.toString();
    }

    function hideAllVars() {
        const params = new URLSearchParams(window.location.search);
        params.delete('reveal');
        window.location.search = params.toString();
    }

    function deleteVars() {
        const checkedBoxes = document.querySelectorAll('input[name=vars]:checked');
        const keys = Array.from(checkedBoxes).map(checkbox => checkbox.value)

        if (!confirm(`Delete ${keys.length ? keys.length : "all"} vars?`)) {
            return
        }


        fetch(`/internal/dashboard/vars/{{ .Scope }}${keys.length ? "?names=" + keys.join(",") : ''}`, {
            method: "DELETE",
        }).then(response => {
            if (response.ok) {
                location.reload()
            } else {
                console.error(response)
                alert("Failed to delete all vars")
            }
        }).catch(error => {
            console.error(error)
            alert("Failed to delete all vars")
        })
    }

    function setVar() {
        const name = document.getElementById('var-name').value
        const value = document.getElementById('var-value').value
        const is_secret = document.getElementById('var-secret').checked
        const is_optional = document.getElementById('var-optional').checked

        if (!name) {
            alert("Name is required")
            return
        }

        fetch(`/internal/dashboard/vars/{{ .Scope }}`, {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ name, value, is_secret, is_optional }),
        }).then(response => {
            if (response.ok) {
                location.reload()
            } else {
                console.error(response)
                alert("Failed to add var")
            }
        }).catch(error => {
            console.error(error)
            alert("Failed to add var")
        })
    }
</script>

{{ end }}
